<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Datum | CRM Admin Dashboard Template</title>
      
      <link rel="stylesheet" href="/assets/css/backend-plugin.min.css" th:href="@{/assets/css/backend-plugin.min.css}">
      <link rel="stylesheet" href="/assets/css/backend.css" th:href="@{/assets/css/backend.css}">  </head>
  <body class=" ">
    <!-- loader Start -->
    <div id="loading">
          <div id="loading-center">
          </div>
    </div>
    <!-- loader END -->
    
      <div class="wrapper">
      <section class="login-content">
         <div class="container h-100">
            <div class="row align-items-center justify-content-center h-100">
               <div class="col-md-5">
                  <div class="card">
                     <div class="card-body">
                        <div class="auth-logo">
                           <img src="/assets/picture/logo.png" th:src="@{/assets/picture/logo.png}" class="img-fluid rounded-normal" alt="logo">
                        </div>
                        <h2 class="mb-2 text-center">登录</h2>
                        <p class="teactionxt-center">请用您的个人信息登录，与我们保持联系.</p>
                        <form th:action="@{/login}" method="post">
                           <div class="row">
                              <div class="col-lg-12">
                                 <div class="form-group">
                                    <label>用户名</label>
                                    <input class="form-control" type="text" name="name" id="name"  placeholder="请输入您的用户名">
                                 </div>
                              </div>
                              <div class="col-lg-12">
                                 <div class="form-group">
                                    <label>密码</label>
                                    <input class="form-control" type="password" name="password" id="password" placeholder="请输入您的密码">
                                 </div>
                              </div>
                              <div class="col-lg-6">
                                 <div class="custom-control custom-checkbox mb-3">
                                    <input type="checkbox" class="custom-control-input" id="customCheck1">
                                    <label class="custom-control-label" for="customCheck1">记住我</label>
                                 </div>
                              </div>
                              <div class="col-lg-6">
                                 <a href="auth-recoverpw.html" class="text-primary float-right">忘记密码?</a>
                              </div>
                           </div>
                           <div class="d-flex justify-content-between align-items-center">
<!--                              <span>Create an Account <a href="register.html" class="text-primary">登录</a></span>-->
                              <button type="submit" style="margin: auto;width: 200px;height: 50px;" class="btn btn-primary">登录</button>
                           </div>
                        </form>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
      </div>
    
    <!-- Backend Bundle JavaScript -->
    <script src="/assets/js/backend-bundle.min.js" th:src="@{/assets/js/backend-bundle.min.js}"></script>
    <!-- Chart Custom JavaScript -->
    <script src="/assets/js/customizer.js" th:src="@{/assets/js/customizer.js}"></script>
    
    <script src="/assets/js/sidebar.js" th:src="@{/assets/js/sidebar.js}"></script>
    
    <!-- Flextree Javascript-->
    <script src="/assets/js/flex-tree.min.js" th:src="@{/assets/js/flex-tree.min.js}"></script>
    <script src="/assets/js/tree.js" th:src="@{/assets/js/tree.js}"></script>
    
    <!-- Table Treeview JavaScript -->
    <script src="/assets/js/table-treeview.js" th:src="@{/assets/js/table-treeview.js}"></script>
    
    <!-- SweetAlert JavaScript -->
    <script src="/assets/js/sweetalert.js" th:src="@{/assets/js/sweetalert.js}"></script>
    
    <!-- Vectoe Map JavaScript -->
    <script src="/assets/js/vector-map-custom.js" th:src="@{/assets/js/vector-map-custom.js}"></script>
    
    <!-- Chart Custom JavaScript -->
    <script src="/assets/js/chart-custom.js" th:src="@{/assets/js/chart-custom.js}"></script>
    <script src="/assets/js/01.js" th:src="@{/assets/js/01.js}"></script>
    <script src="/assets/js/02.js" th:src="@{/assets/js/02.js}"></script>
    
    <!-- slider JavaScript -->
    <script src="/assets/js/slider.js" th:src="@{/assets/js/slider.js}"></script>
    
    <!-- Emoji picker -->
    <script src="/assets/jsndex.js" th:src="@{/assets/js/index.js}" type="module"></script>
    
    
    <!-- app JavaScript -->
    <script src="/assets/js/app.js" th:src="@{/assets/js/app.js}"></script>  </body>
</html>